<template>
  <template v-for="(item, index) in _subMeny">
    <!--树枝-->
    <template v-if="item.childrens && item.childrens.length > 0">
      <el-sub-menu
        :key="item.menuId + '_' + index"
        :index="item.menuId"
        style="vertical-align: middle;"
        
      >
        <template #title>
          <component
            :is="item.icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
          >
          </component>
          <span>{{item.title}}</span>
        </template>
        <!--递归子菜单-->
        <menu-sub
          :subMenu="item.childrens"
        />
      </el-sub-menu>
    </template>
    <!--树叶-->
    <el-menu-item v-else
      :index="item.menuId"
      :key="item.menuId + 'son_' + index"
      
    >
      <template #title>
        <span style="float: left;">
          <component
            :is="item.icon"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;vertical-align: middle;"
          >
          </component>
          <span >{{item.title}}</span>
        </span>
      </template>
    </el-menu-item>
  </template>
</template>

<script setup>
  import { ElMenuItem, ElSubMenu } from 'element-plus'
  import { defineComponent, markRaw } from 'vue'

/**
 * v-bind="subMenuAttrs"
 * v-bind="menuItemAttrs"
 * subMenuAttrs: Object, // 树枝的属性
 * menuItemAttrs: Object, // 树叶的属性
 */
  const props = defineProps({
    subMenu: Array // 要显示的菜单，可以n级
  })

  const _subMeny = markRaw(props.subMenu)

</script>
